<template>
  <div class="policy">
    <el-card class="box-card" style="margin-top: 35px;border-radius: 20px;">
      <div class="policy-header">
        <!--      <div class="">-->
        <div  style="display: flex;align-items: center">
          <h2>配置管理</h2>
        </div>
      </div>
      <div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane v-for="(item,index) in tabsList" :label="item.name" :name="item.key">
            <el-input v-model="usPhone" v-if="item.key=='usPhone'" placeholder="请输入手机号"></el-input>
            <el-input v-model="kefuAdd" v-else-if="item.key=='kefuAdd'" placeholder="请输入客服地址"></el-input>
            <EditorBar v-model="contraband" v-else-if="item.key=='contraband'"></EditorBar>
            <EditorBar v-model="packing" v-else-if="item.key=='packing'"></EditorBar>
            <EditorBar v-model="protocol" v-else-if="item.key=='protocol'"></EditorBar>
            <div v-else-if="item.key=='MovieTickets'">
              <el-form :model="MovieTickets" label-position="top" :label-width="'120px'">
                <el-form-item label="图片:" >
                  <ImageUpload v-model="MovieTickets.img"/>
                </el-form-item>
                <el-form-item label="类型:" >
                  <el-radio-group v-model="MovieTickets.type">
                    <el-radio :label="'link'">内部</el-radio>
                    <el-radio :label="'url'">链接</el-radio>
                    <el-radio :label="'mini'">小程序</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="小程序appid:" v-if="MovieTickets.type=='mini'">
                  <el-input v-model="MovieTickets.appid" autocomplete="off" placeholder="请输入小程序appid"></el-input>
                </el-form-item>
                <el-form-item label="路径:" v-if="MovieTickets.type=='link'||MovieTickets.type=='url'">
                  <el-input v-model="MovieTickets.url" autocomplete="off" placeholder="请输入url"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div v-else-if="item.key=='TakingTaxi'">
              <el-form :model="TakingTaxi" label-position="top" :label-width="'120px'">
                <el-form-item label="图片:" >
                  <ImageUpload v-model="TakingTaxi.img"/>
                </el-form-item>
                <el-form-item label="类型:" >
                  <el-radio-group v-model="TakingTaxi.type">
                    <el-radio :label="'link'">内部</el-radio>
                    <el-radio :label="'url'">链接</el-radio>
                    <el-radio :label="'mini'">小程序</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="小程序appid:" v-if="TakingTaxi.type=='mini'">
                  <el-input v-model="TakingTaxi.appid" autocomplete="off" placeholder="请输入小程序appid"></el-input>
                </el-form-item>
                <el-form-item label="路径:" v-if="TakingTaxi.type=='link'||TakingTaxi.type=='url'">
                  <el-input v-model="TakingTaxi.url" autocomplete="off" placeholder="请输入url"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div v-else-if="item.key=='PhoneBill'">
              <el-form :model="PhoneBill" label-position="top" :label-width="'120px'">
                <el-form-item label="图片:" >
                  <ImageUpload v-model="PhoneBill.img"/>
                </el-form-item>
                <el-form-item label="类型:" >
                  <el-radio-group v-model="PhoneBill.type">
                    <el-radio :label="'link'">内部</el-radio>
                    <el-radio :label="'url'">链接</el-radio>
                    <el-radio :label="'mini'">小程序</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="小程序appid:" v-if="PhoneBill.type=='mini'">
                  <el-input v-model="PhoneBill.appid" autocomplete="off" placeholder="请输入小程序appid"></el-input>
                </el-form-item>
                <el-form-item label="路径:" v-if="PhoneBill.type=='link'||PhoneBill.type=='url'">
                  <el-input v-model="PhoneBill.url" autocomplete="off" placeholder="请输入url"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div v-else-if="item.key=='SendingZK'">
              <el-form :model="SendingZK" label-position="top" :label-width="'120px'">
                <el-form-item label="图片:" >
                  <ImageUpload v-model="SendingZK.img"/>
                </el-form-item>
                <el-form-item label="类型:" >
                  <el-radio-group v-model="SendingZK.type">
                    <el-radio :label="'link'">内部</el-radio>
                    <el-radio :label="'url'">链接</el-radio>
                    <el-radio :label="'mini'">小程序</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="小程序appid:" v-if="SendingZK.type=='mini'">
                  <el-input v-model="SendingZK.appid" autocomplete="off" placeholder="请输入小程序appid"></el-input>
                </el-form-item>
                <el-form-item label="路径:" v-if="SendingZK.type=='link'||SendingZK.type=='url'">
                  <el-input v-model="SendingZK.url" autocomplete="off" placeholder="请输入url"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div style="display: flex;justify-content:flex-end;margin: 30px;">
              <el-button type="primary" @click="enter">确定</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>

      </div>

    </el-card>

  </div>
</template>

<script>
import {settingSet,settingInfo,imgURL} from "@/api"

import Ueditor from "@/components/ueditor/ueditor";
export default {
  name: "aboutUs",
  components: {
    Ueditor
  },
  data() {
    return {
      imgURL,
      tabsList:[
        {name:'联系我们手机号',key:'usPhone'},
        {name:'联系客服地址',key:'kefuAdd'},
        {name:'违禁品信息',key:'contraband'},
        {name:'包装费信息',key:'packing'},
        {name:'寄件服务协议',key:'protocol'},
        {name:'首页电影票',key:'MovieTickets'},
        {name:'首页话费',key:'PhoneBill'},
        {name:'首页打车',key:'TakingTaxi'},
        {name:'首页寄件折扣',key:'SendingZK'},
      ],
      activeName:'usPhone',
      usPhone:'',
      kefuAdd:'',
      contraband:'',
      packing:'',
      protocol:'',
      MovieTickets:{
        img:'',
        type:'link',
        appid:'',
        url:''
      },
      PhoneBill:{
        img:'',
        type:'link',
        appid:'',
        url:''
      },
      TakingTaxi:{
        img:'',
        type:'link',
        appid:'',
        url:''
      },
      SendingZK:{
        img:'',
        type:'link',
        appid:'',
        url:''
      },
    };
  },
  created() {
    this.getInfo()

  },
  methods: {
    enter(){
      settingSet({
        key:this.activeName,
        value:this.activeName=='usPhone'?this.usPhone:this.activeName=='kefuAdd'?this.kefuAdd:this.activeName=='contraband'?this.contraband:this.activeName=='packing'?this.packing:this.activeName=='protocol'?this.protocol:this.activeName=='MovieTickets'?JSON.stringify(this.MovieTickets):this.activeName=='PhoneBill'?JSON.stringify(this.PhoneBill):this.activeName=='TakingTaxi'?JSON.stringify(this.TakingTaxi):this.activeName=='SendingZK'?JSON.stringify(this.SendingZK):'',
        value_type:'string',
        is_active:true
      }).then(res=>{
        console.log(res)
        if (res.code==10000){
          this.$message({
            message: '保存成功',
            type: 'success'
          });
          this.getInfo()
        }
      })
    },
    getInfo(){
      settingInfo({
        keys:this.activeName
      }).then(res=>{
        console.log(res)
        if (res.code==10000){
          if(res.data.length!=0){
            if(this.activeName=='usPhone'){
              this.usPhone = res.data[this.activeName];
            }else if(this.activeName=='kefuAdd'){
              this.kefuAdd = res.data[this.activeName];
            }else if(this.activeName=='contraband'){
              this.contraband = res.data[this.activeName];
            }else if(this.activeName=='packing'){
              this.packing = res.data[this.activeName];
            }else if(this.activeName=='protocol'){
              this.protocol = res.data[this.activeName];
            }else if(this.activeName=='MovieTickets'){
              this.MovieTickets = JSON.parse(res.data[this.activeName]);
            }else if(this.activeName=='PhoneBill'){
              this.PhoneBill = JSON.parse(res.data[this.activeName]);
            }else if(this.activeName=='TakingTaxi'){
              this.TakingTaxi = JSON.parse(res.data[this.activeName]);
            }else if(this.activeName=='SendingZK'){
              this.SendingZK = JSON.parse(res.data[this.activeName]);
            }

          }else{
            this.usPhone=''
            this.kefuAdd=''
            this.contraband=''
            this.packing=''
            this.protocol=''
            this.MovieTickets={
              type:'link',
              appid:'',
              url:'',
              img:'',
            }
            this.PhoneBill={
              img:'',
              type:'link',
              appid:'',
              url:''
            }
            this.TakingTaxi={
              img:'',
              type:'link',
              appid:'',
              url:''
            }
            this.SendingZK={
              img:'',
              type:'link',
              appid:'',
              url:''
            }
          }

        }
      })
    },
    handleClick(tab, event) {
        // console.log(tab, event);
        this.getInfo()
    }
  }
}
</script>

<style scoped lang="scss">
.policy {
  font-size: 14px;
  padding: 0 80px;
  box-sizing: border-box;
  color: #000;
  &-header {
    margin: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .class-box {

      //float: right;
      margin-bottom: 5px;
    }
    .add-btn {
      width: 100px;
      height: 40px;
      border-radius: 5px;
      background: #1184e6;
      color: #ffffff;
      text-align: center;
      line-height: 40px;
    }
    .add-btn {
      margin-left: 80px;
    }
  }
  .list {
    margin: 30px;
    text-align: center;
  }
  .paging-device {
    margin: 30px;

  }
}

</style>
<style>
.el-table__header-wrapper{
  border-radius: 10px;
}
</style>





